<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!--  
        1. 事件绑定
            * 事件属性
                <开始标签 事件属性名="js代码">
            * 对象属性
                对象.事件属性名= js代码
            * 事件监听
                老IE:对象.attachEvent('on事件',函数名)
                非IE:对象.addEventListener('事件',函数名)
        2. 解除绑定
            * 对象.事件属性名 = null
            * 对象.事件属性名 = function(){}
            * 老IE:对象.detachEvent('on事件',函数名)
            * 非IE:对象.removeEventListener('事件',函数名)
    -->
    <!-- 事件属性 -->
    <button id="btn1" onclick="alert('按我一下')">按钮1</button>
    <!-- 对象属性 -->
    <button id="btn2">按钮2</button>
    <script>
        var btn2 = document.getElementById('btn2');
        btn.onclick = function(){
            alert('按我两下');
        }
    </script>
    <button id="btn3">按钮3</button>
    <script>
        var btn3 = document.getElementById('btn3');
        btn1.addEventListener('click',demo);
        function demo(){
            console.log('监听一下');
        }
    </script>
    <script>
        // 解绑事件
        var btn1 = document.getElementById('btn1');
        btn1.onclick = null;
        btn1.onclick = function(){}
        btn3.removeEventListener('click',demo);
    </script>
</body>
</html>